<template>
  <div class="hello">
    <ul>
      <li v-for="ad in ads">
        <h3>{{ad.title}}</h3>
      </li>
    </ul>
    <swipe class="my-swipe">
      <swipe-item class="slide1">11</swipe-item>
      <swipe-item class="slide2">22</swipe-item>
      <swipe-item class="slide3">223</swipe-item>
    </swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vue-swipe';
export default {
  name: 'Ads',
  components: {
      Swipe,
      SwipeItem
    },
  data(){
    return {
      ads:[]
    }
  },
  props: ['pos_id','nums'],
  created(){
    this.$http.post(thisHost + 'ad/index', {pos_id: this.pos_id, nums: this.nums})
      .then((response) => {
          let res = JSON.parse(response.body);
          if (res.code) {this.ads = res.result}
      }, (response) => {
          console.log(response.body)
    });
  }
}
</script>
<style>
.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap{-webkit-transform:translateZ(0);transform:translateZ(0)}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff}
  .my-swipe {
    height: 200px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    overflow: hidden;
  }

  .slide1 {
    background-color: #0089dc;
    color: #fff;
  }

  .slide2 {
    background-color: #ffd705;
    color: #000;
  }

  .slide3 {
    background-color: #ff2d4b;
    color: #fff;
  }
</style>